<footer class="bg-gray-800 text-white py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-4 gap-8">
            <!-- Brand -->
            <div>
                <h3 class="text-xl font-bold mb-4">{{ _('Sprunki Phase 3') }}</h3>
                <p class="text-gray-400">{{ _('Experience the joy of interactive music creation.') }}</p>
            </div>

            <!-- Quick Links -->
            <div>
                <h3 class="text-xl font-bold mb-4">{{ _('Quick Links') }}</h3>
                <ul class="space-y-2">
                    <li>
                        <a href="{{ url_for('main.about') }}" class="text-gray-400 hover:text-white">
                            {{ _('About') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('main.blog') }}" class="text-gray-400 hover:text-white">
                            {{ _('Blog') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('main.contact') }}" class="text-gray-400 hover:text-white">
                            {{ _('Contact') }}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Legal -->
            <div>
                <h3 class="text-xl font-bold mb-4">{{ _('Legal') }}</h3>
                <ul class="space-y-2">
                    <li>
                        <a href="{{ url_for('main.privacy', lang=g.current_language) }}" class="text-gray-400 hover:text-white">
                            {{ _('Privacy Policy') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('main.terms', lang=g.current_language) }}" class="text-gray-400 hover:text-white">
                            {{ _('Terms of Service') }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('main.cookie_policy', lang=g.current_language) }}" class="text-gray-400 hover:text-white">
                            {{ _('Cookie Policy') }}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Social -->
            <div>
                <h3 class="text-xl font-bold mb-4">{{ _('Connect') }}</h3>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-discord text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Copyright -->
        <div class="mt-8 pt-8 border-t border-gray-700 text-center">
            <p class="text-gray-400">
                &copy; {{ g.current_year }} {{ _('Sprunki Phase 3. All rights reserved.') }}
            </p>
        </div>
    </div>
</footer> 